<template>
<div>
    <carousel :shop='shop2'></carousel>           
    <div id="menus">
        <div id="main">
            <cd :shops='shop' ref="reference" :dd='dd'></cd>
            <list :shops='shop' :dd='dd'></list>
        </div>
    </div>
    <xia :shop3='shop3'></xia>
</div> 
</template>
<script>
import cd from './cd'
import list from './list'
import carousel from '../carousel/carousel'
import xia from './xia'
export default {
    props:{
        'shop': Array,
        'shop2':Object,
        'shop3':Object
    },
    data(){
        return{
            srcs:0,
            dd:false
        }
    },
    components:{
        cd,
        list,
        carousel,
        xia
    },
    methods:{
        ss(){
            var scrolltop = window.pageYOffset || document.documentElement.scrollTop||document.body.scrollTop
            if(scrolltop>=this.srcs-46){
                this.dd=true
                console.log('-----')
            }else{
                this.dd=false
            }
        }
    },
    mounted() {
        this.srcs=this.$refs.reference.$el.offsetTop
        console.log('---',this.srcs)
        window.addEventListener('scroll',this.ss)
    },
    destroyed(){
        window.removeEventListener('scroll',this.ss)
    }
}
</script>
<style lang="stylus" scoped>
    #menus
        padding-bottom 12.8vw
        background-color #fff
        height 100%
        #main
            display flex
            height 100%
</style>
